import './index.scss'
const WebSource = () => {
  return (
    <div className="websourcePage">
      <div style={{ fontSize: 26, textAlign: 'center' }}>小网站的诞生</div>
      <div style={{ fontSize: 20, marginTop: 10 }}>一、开发阶段</div>
      <div style={{ fontSize: 18, marginTop: 10, fontWeight: 'bold' }}>
        前端：
      </div>
      <div>1. 项目初始: 样式确定、功能确定、交互确定等；</div>
      <div>
        2. 创建项目: 使用npm构建一个vite + typeScript + react项目，构建命令 `npm
        create vite@latest app-name -- --template
        react-ts`(创建其他项目命令可查看
        <span
          style={{ color: '#1B6EF3', cursor: 'pointer' }}
          onClick={() => {
            window.open('https://cn.vitejs.dev/guide/')
          }}
        >
          官网
        </span>
        )；
      </div>
      <div>3. 项目开发: 开发页面和交互；</div>
      <div>
        4. 我的项目
        <span
          style={{ color: '#1B6EF3', cursor: 'pointer' }}
          onClick={() => {
            window.open('https://gitee.com/yangshiqi1118/life_app')
          }}
        >
          源码
        </span>
        。
      </div>
      <div style={{ fontSize: 18, marginTop: 10, fontWeight: 'bold' }}>
        后端：
      </div>
      <div>
        1.
        项目初始：Node环境安装、安装MySql、安装MySql可视化工具：navicat(企业常用)，workbench(不好用)；
      </div>
      <div>2. 创建项目：命令`npm init -y`；</div>
      <div>3. 项目搭建：安装插件或者模块</div>
      <div className="child_box">
        <div>(1) express: 第三方封装的插件，可以快速构建服务器实例；</div>
        <div>
          (2) cors:
          注册中间件，处理跨域(本质：服务器添加响应头：Access-Control-Allow-Origin：*，允许所有源)；
        </div>
        <div>
          (3) jsonwebtoken:
          将用户信息加密成token返回给前端，前端登录后带在请求头上；
        </div>
        <div>(4) express-jwt: 处理请求头带过来的token，判断是否有效；</div>
        <div>(5) bcryptjs: 用户密码加密及比较新旧密码是否一致；</div>
        <div>(6) @hapi/joi: 定义参数校验规则；</div>
        <div>(7) @escook/express-joi：将规则添加在请求接口上；</div>
        <div>(8) MySql: 数据库插件(这个插件是在Node代码中执行数据库)；</div>
        <div>(9) 其他插件根据需求自行安装。</div>
      </div>
      <div>4. 搭建服务器实例，开发接口，连接数据库等；</div>
      <div>
        5. 我的项目
        <span
          style={{ color: '#1B6EF3', cursor: 'pointer' }}
          onClick={() => {
            window.open('https://gitee.com/yangshiqi1118/life_app_server')
          }}
        >
          源码
        </span>
        。
      </div>
      <div style={{ fontSize: 20, marginTop: 10 }}>二、部署阶段</div>
      <div style={{ marginTop: 10 }}>
        1. 购买服务器（个人使用买低配置就可以，我的是liunx centos7 +
        2核(2G)；买完之后先修改密码【记住密码】）；
      </div>
      <div>2. 购买域名（可选）；</div>
      <div>
        3.
        自己电脑安装软件（Xftp：上传静态代码资源；Xshell：命令行终端）；
      </div>
      <div>
        4.
        服务器配置：购买后在自己服务器官网控制台安全组放开常用tcp端口：80，443等；另外有用到其他端口也添加到安全组同时放开；
      </div>
      <div>
        5.
        服务器防火墙配置：打开Xshell通过自己服务器公网IP和密码连接，查看防火墙状态和开放的端口。两种选择：1.关闭防火墙，2.设置永久开放端口：80/443等【防火墙设置命令问AI即可】；
      </div>
      <div>6. 前端部署：</div>
      <div className="child_box">
        <div>(1) 打开Xftp连接服务器，创建自己的文件夹，将打包后的文件放进去；</div>
        <div>
          (2) 打开Xshell使用终端安装Nginx（一般服务器自带,
          文件目录：/etc/nginx/nginx.conf）；
        </div>
        <div>
          (3)
          前端项目nginx.conf文件配置：root前端项目index.html入口文件配置；前端若使用history模式的，Nginx配置中使用try_files处理刷新404路由报错【更多的配置问AI即可】；
        </div>
        <div>(4) 配置完成后启动Nginx【命令问AI即可】；</div>
      </div>
      <div>7. 后端部署：</div>
      <div className="child_box">
        <div>(1) 打开Xftp连接服务器，创建自己的文件夹，将文件放进去；</div>
        <div>
          (2)
          若后端一样跟我使用的是Node开发，数据库使用的MySql，则在服务器上安装Node环境以及安装MySql（记住MySql密码，线上Node代码中访问数据库的密码改成这个）【安装教程问AI即可，报错也是】；
        </div>
        <div>(3) Node项目持续性集成工具比较好的是pm2，所以继续安装pm2；</div>
        <div>(4) 安装完成后使用pm2运行入口文件app.js【pm2使用命令问AI即可】。</div>
      </div>
      <div>
        8.
        如若购买了域名，还需要在所购买的服务器官网进行云解析DNS（一般使用免费的），如果在解析前域名已经配置到项目中了，需要关闭nginx或者取消配置。解析成功后在nginx.conf文件中添加Server_name[所购买的域名]。
      </div>
      <div>
        9. 如果想使用SSL协议，可以使用免费插件let’s Encrypt，打开Xshell终端安装，使用之后前端nginx.conf文件中修改默认端口为443，Node后端代码中使用https创建服务器实例。
      </div>
      <div>【备注：Xftp, Xshell, MySql , Navicat等软件需要可联系我免费发送或者百度自行安装】</div>
      <div
        style={{
          textAlign: 'center',
          marginTop: 30,
          fontWeight: 'bold',
          fontSize: 20,
        }}
      >
        一个简单小网站就诞生了！
      </div>
    </div>
  )
}
export default WebSource
